@extends('master')
@section('style')
<style>
	#content{margin-top: 80px;font-size: 14px;}
	#topic-big-btn{background: #eff6fA;border: 1px solid #cce1ef;padding: 34px;width: 268px;height:145px;border-radius: 5px;line-height: 40px;font-size: 12px;cursor: pointer;}
	#topic-tj{border-top: 1px solid #ddd;width: 270px;margin-top: 20px;font-size: 12px;padding: 20px 0px;}
	#topic-tj-title{font-size: 14px;opacity: 0.8;}
	#topic-tj-xq img{border-radius: 5px;cursor: pointer;}
	#topic-tj-xq li div{line-height: 40px;padding: 10px;margin-top: 10px;font-size: 12px;}
	#topic-title{border-bottom: 1px solid #ddd;padding: 5px;}
	#topic-title a{font-size: 12px; color: #999;}
	#column-list{border-bottom: 1px solid #ddd;}
	#column-list li{margin-top: 10px;line-height: 24px; height: 26px;border: 1px solid #ddd;border-radius: 12px;cursor: pointer;font-size: 12px;margin-right: 20px;padding: 0px 10px;}
	#column-list li:hover,#column-list .active{background: #259;border-color: #259;color: white;}
	.topic_img img{border-radius: 5px; overflow: hidden;}
	.topic_datail{margin-top: 20px;padding: 5px;border-radius: 10px;cursor: pointer;}
	.topic_datail:hover{background: #ddd;}
</style>
@endsection
@section('content')
<div id="content" class="container">
<!-- 左侧内容栏 start -->
	<div class="col-md-8">
		<!-- 头部标题栏 start -->
		<div id="topic-title" class="col-md-12">
			<div class="col-md-9"><span id="icon" class="glyphicon glyphicon-th-list"></span><b>最新栏目动态</b></div>
			<!-- <div class="col-md-3"><a href="#">共关注5个话题</a></div> -->
		</div>
		<!-- 头部标题栏 end -->
		<!-- 栏目列表栏 start -->
		<div id="column-list" class="col-md-12">
			<ul class="list-inline list-unstyled">
			@foreach($columns as $k=>$v)
				<li alt="{{$v->id}}" @if($k == 0) class="active" @endif>{{$v->title}}</li>
			@endforeach
			</ul>
		</div>
		<!-- 栏目列表栏 end -->
		<div id="topic_list" class="col-md-12">
		@foreach($topics as $k=>$v)
			<div class="col-md-6 topic_datail"> <a href="/topic/{{$v->id}}"><span class="topic_img"><img width="40" src="{{$v->pic}}" alt=""></span> <span class="topic_title">{{$v->title}}</span></a> </div>
		@endforeach
		</div>
		<script>
			$(function(){
				$('#column-list li').click(function() {
					$(this).siblings('li').removeClass('active');
					$(this).addClass('active');
					$.post('/api/topic-'+$(this).attr('alt'),function(res){
						var data = '';
						for (var i = res.length - 1; i >= 0; i--) {
							data += '<div class="col-md-6 topic_datail"> <a href="/topic/'+res[i].id+'"><span class="topic_img"><img width="40" src="'+res[i].pic+'" alt=""></span> <span class="topic_title">'+res[i].title+'</span></a> </div>';
						}
						$('#topic_list').html(data);
					}, 'json');
				});
			});
		</script>
	</div>
<!-- 左侧内容栏 end -->
	<!-- 右侧推荐栏目 start -->
	<div class="col-md-4">
		<div id="topic-big-btn" class="col-md-12 text-center">
			<div class="btn btn-primary">进入话题广场</div><br>
			<span><a href="#">来这里发现更多有趣的话题</a></span>
		</div>
		<!-- 推荐话题 start -->
		<div id="topic-tj" class="col-md-12">
			<div id="topic-tj-title" class="col-md-9"><b>其他人关注的话题</b></div>
			<div id="topic-tj-change" class="col-md-3"><a href="#">换一换</a></div>
			<ul id="topic-tj-xq" class="list-unstyled">
				<li>
					<div class="col-md-9">
						<img data-src="holder.js/40x40?text=tj" alt="">
						<b><a href="#">户外运动</a></b>
					</div>
					<div class="col-md-3"><a href="#"><span id="icon" class="glyphicon glyphicon-plus"></span>关注</a></div>
				</li>
				<li>
					<div class="col-md-9">
						<img data-src="holder.js/40x40?text=tj" alt="">
						<b><a href="#">户外运动</a></b>
					</div>
					<div class="col-md-3"><a href="#"><span id="icon" class="glyphicon glyphicon-plus"></span>关注</a></div>
				</li>
				<li>
					<div class="col-md-9">
						<img data-src="holder.js/40x40?text=tj" alt="">
						<b><a href="#">户外运动</a></b>
					</div>
					<div class="col-md-3"><a href="#"><span id="icon" class="glyphicon glyphicon-plus"></span>关注</a></div>
				</li>
				<li>
					<div class="col-md-9">
						<img data-src="holder.js/40x40?text=tj" alt="">
						<b><a href="#">户外运动</a></b>
					</div>
					<div class="col-md-3"><a href="#"><span id="icon" class="glyphicon glyphicon-plus"></span>关注</a></div>
				</li>
				<li>
					<div class="col-md-9">
						<img data-src="holder.js/40x40?text=tj" alt="">
						<b><a href="#">户外运动</a></b>
					</div>
					<div class="col-md-3"><a href="#"><span id="icon" class="glyphicon glyphicon-plus"></span>关注</a></div>
				</li>
			</ul>
		</div>
		<!-- 推荐话题 end -->
	</div>
	<!-- 右侧推荐栏目 end -->
</div>
@endsection